<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>成分表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="../assets/images/icon/favicon.ico">
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/themify-icons.css">
    <link rel="stylesheet" href="../assets/css/metisMenu.css">
    <link rel="stylesheet" href="../assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="../assets/css/slicknav.min.css">
    <!-- amcharts css -->
    <link rel="stylesheet" href="../assets/css/export.css" type="text/css" media="all"/>
    <!-- Start datatable css -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.jqueryui.min.css">
    <!-- style css -->
    <link rel="stylesheet" href="../assets/css/typography.css">
    <link rel="stylesheet" href="../assets/css/default-css.css">
    <link rel="stylesheet" href="../assets/css/styles.css">
    <link rel="stylesheet" href="../assets/css/responsive.css">
    <!-- modernizr css -->
    <script src="../assets/js/vendor/modernizr-2.8.3.min.js"></script>
    <style type="text/css">

    </style>
</head>

<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<!-- preloader area start -->
<div id="preloader">
    <div class="loader"></div>
</div>
<!-- preloader area end -->
<!-- page container area start -->
<div class="page-container">
    <!-- sidebar menu area start -->
    <div class="sidebar-menu">
        <div class="sidebar-header">
            <div class="logo">
                <a href="index.html"><img src="../assets/images/icon/logo.png" alt="logo"></a>
            </div>
        </div>
        <div class="main-menu">
            <div class="menu-inner">
                <nav>
                    <ul class="metismenu" id="menu">
                        <li>
                            <a href="javascript:void(0)" aria-expanded="true"><i
                                    class="ti-layout-sidebar-left"></i><span>Sidebar
                                        Types
                                    </span></a>
                            <ul class="collapse">
                                <li><a href="#">Left Sidebar</a></li>
                                <li><a href="#">Horizontal Sidebar</a></li>
                            </ul>
                        </li>
                        <li class="active">
                            <a href="javascript:void(0)" aria-expanded="true"><i
                                    class="ti-pie-chart"></i><span>Charts</span></a>
                            <ul class="collapse">
                                <li><a href="index.html">实验数据统计图/浓度折线图概览</a></li>
                                <li class="active"><a href="table_compounds.html">成分表</a></li>
                                <li><a href="experiment.html">实验数据表</a></li>
                            </ul>
                        </li>


                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!-- sidebar menu area end -->
    <!-- main content area start -->
    <div class="main-content">
        <!-- header area start -->
        <div class="header-area">
            <div class="row align-items-center">
                <!-- nav and search button -->
                <div class="col-md-6 col-sm-8 clearfix">
                    <div class="nav-btn pull-left">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="search-box pull-left">
                        <form action="#">
                            <input type="text" name="search" placeholder="Search..." required>
                            <i class="ti-search"></i>
                        </form>
                    </div>
                </div>
                <!-- profile info & task notification -->
                <div class="col-md-6 col-sm-4 clearfix">
                    <ul class="notification-area pull-right">
                        <li id="full-view"><i class="ti-fullscreen"></i></li>
                        <li id="full-view-exit"><i class="ti-zoom-out"></i></li>
                        <li class="dropdown">
                            <i class="ti-bell dropdown-toggle" data-toggle="dropdown">
                                <span>2</span>
                            </i>
                            <div class="dropdown-menu bell-notify-box notify-box">
                                <span class="notify-title">You have 3 new notifications <a href="#">view all</a></span>
                                <div class="nofity-list">
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb"><i class="ti-key btn-danger"></i></div>
                                        <div class="notify-text">
                                            <p>You have Changed Your Password</p>
                                            <span>Just Now</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb"><i class="ti-comments-smiley btn-info"></i></div>
                                        <div class="notify-text">
                                            <p>New Commetns On Post</p>
                                            <span>30 Seconds ago</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb"><i class="ti-key btn-primary"></i></div>
                                        <div class="notify-text">
                                            <p>Some special like you</p>
                                            <span>Just Now</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb"><i class="ti-comments-smiley btn-info"></i></div>
                                        <div class="notify-text">
                                            <p>New Commetns On Post</p>
                                            <span>30 Seconds ago</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb"><i class="ti-key btn-primary"></i></div>
                                        <div class="notify-text">
                                            <p>Some special like you</p>
                                            <span>Just Now</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb"><i class="ti-key btn-danger"></i></div>
                                        <div class="notify-text">
                                            <p>You have Changed Your Password</p>
                                            <span>Just Now</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb"><i class="ti-key btn-danger"></i></div>
                                        <div class="notify-text">
                                            <p>You have Changed Your Password</p>
                                            <span>Just Now</span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown">
                            <i class="fa fa-envelope-o dropdown-toggle" data-toggle="dropdown"><span>3</span></i>
                            <div class="dropdown-menu notify-box nt-enveloper-box">
                                <span class="notify-title">You have 3 new notifications <a href="#">view all</a></span>
                                <div class="nofity-list">
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb">
                                            <img src="../assets/images/author/author-img1.jpg" alt="image">
                                        </div>
                                        <div class="notify-text">
                                            <p>Aglae Mayer</p>
                                            <span class="msg">Hey I am waiting for you...</span>
                                            <span>3:15 PM</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb">
                                            <img src="../assets/images/author/author-img2.jpg" alt="image">
                                        </div>
                                        <div class="notify-text">
                                            <p>Aglae Mayer</p>
                                            <span class="msg">When you can connect with me...</span>
                                            <span>3:15 PM</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb">
                                            <img src="../assets/images/author/author-img3.jpg" alt="image">
                                        </div>
                                        <div class="notify-text">
                                            <p>Aglae Mayer</p>
                                            <span class="msg">I missed you so much...</span>
                                            <span>3:15 PM</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb">
                                            <img src="../assets/images/author/author-img4.jpg" alt="image">
                                        </div>
                                        <div class="notify-text">
                                            <p>Aglae Mayer</p>
                                            <span class="msg">Your product is completely Ready...</span>
                                            <span>3:15 PM</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb">
                                            <img src="../assets/images/author/author-img2.jpg" alt="image">
                                        </div>
                                        <div class="notify-text">
                                            <p>Aglae Mayer</p>
                                            <span class="msg">Hey I am waiting for you...</span>
                                            <span>3:15 PM</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb">
                                            <img src="../assets/images/author/author-img1.jpg" alt="image">
                                        </div>
                                        <div class="notify-text">
                                            <p>Aglae Mayer</p>
                                            <span class="msg">Hey I am waiting for you...</span>
                                            <span>3:15 PM</span>
                                        </div>
                                    </a>
                                    <a href="#" class="notify-item">
                                        <div class="notify-thumb">
                                            <img src="../assets/images/author/author-img3.jpg" alt="image">
                                        </div>
                                        <div class="notify-text">
                                            <p>Aglae Mayer</p>
                                            <span class="msg">Hey I am waiting for you...</span>
                                            <span>3:15 PM</span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="settings-btn">
                            <i class="ti-settings"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- header area end -->
        <!-- page title area start -->
        <div class="page-title-area">
            <div class="row align-items-center">
                <div class="col-sm-6">
                    <div class="breadcrumbs-area clearfix">
                        <h4 class="page-title pull-left">Dashboard</h4>
                        <ul class="breadcrumbs pull-left">
                            <li><a href="index.html">Home</a></li>
                            <li><span>Datatable</span></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-6 clearfix">
                    <div class="user-profile pull-right">
                        <img class="avatar user-thumb" src="../assets/images/author/avatar.png" alt="avatar">
                        <h4 class="user-name dropdown-toggle" data-toggle="dropdown">Kumkum Rai <i
                                class="fa fa-angle-down"></i></h4>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Message</a>
                            <a class="dropdown-item" href="#">Settings</a>
                            <a class="dropdown-item" href="#">Log Out</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Hoverable Rows Table start -->
        <div class="col-lg-6 mt-5">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title">成分数据表格</h4>
                    <div class="single-table">
                        <div class="header-area">
                            每页展示
                            <select class="custom-select-sm" id="select_num">
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>

                            </select>
                            条数据
                            <button type='button' onclick="startAdd()" class='btn btn-flat btn-outline-primary mb-3 float-right'>添加化合物</button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover text-center">
                                <thead class="text-uppercase">
                                <tr>
                                    <th>序号</th>
                                    <th>中文名</th>
                                    <th>英文名</th>
                                    <th>种类</th>
                                    <th colspan="2">操作</th>
                                </tr>
                                </thead>
                                <tbody id="tb_01">
                                <!--展示数据-->
                                </tbody>
                            </table>
                        </div>
                        <div class="text-center">
                            <input class="btn btn-flat btn-outline-primary mb-3" type="button" value="上一页" id="btn_pre">
                            <span class="">当前是第<b id="tb_page">1</b>页</span>
                            <input class="btn btn-flat btn-outline-primary mb-3" type="button" value="下一页"
                                   id="btn_next">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Hoverable Rows Table end -->


    </div>
    <!-- main content area end -->
    <!-- footer area start-->
    <footer>
        <div class="footer-area">
        </div>
    </footer>
    <!-- footer area end-->
</div>
<!-- page container area end -->
<!-- offset area start -->
<div class="offset-area">
    <div class="offset-close"><i class="ti-close"></i></div>
    <ul class="nav offset-menu-tab">
        <li><a class="active" data-toggle="tab" href="#activity">Activity</a></li>
        <li><a data-toggle="tab" href="#settings">Settings</a></li>
    </ul>
    <div class="offset-content tab-content">
        <div id="activity" class="tab-pane fade in show active">
            <div class="recent-activity">
                <div class="timeline-task">
                    <div class="icon bg1">
                        <i class="fa fa-envelope"></i>
                    </div>
                    <div class="tm-title">
                        <h4>Rashed sent you an email</h4>
                        <span class="time"><i class="ti-time"></i>09:35</span>
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.
                    </p>
                </div>
                <div class="timeline-task">
                    <div class="icon bg2">
                        <i class="fa fa-check"></i>
                    </div>
                    <div class="tm-title">
                        <h4>Added</h4>
                        <span class="time"><i class="ti-time"></i>7 Minutes Ago</span>
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur.
                    </p>
                </div>
                <div class="timeline-task">
                    <div class="icon bg2">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                    <div class="tm-title">
                        <h4>You missed you Password!</h4>
                        <span class="time"><i class="ti-time"></i>09:20 Am</span>
                    </div>
                </div>
                <div class="timeline-task">
                    <div class="icon bg3">
                        <i class="fa fa-bomb"></i>
                    </div>
                    <div class="tm-title">
                        <h4>Member waiting for you Attention</h4>
                        <span class="time"><i class="ti-time"></i>09:35</span>
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.
                    </p>
                </div>
                <div class="timeline-task">
                    <div class="icon bg3">
                        <i class="ti-signal"></i>
                    </div>
                    <div class="tm-title">
                        <h4>You Added Kaji Patha few minutes ago</h4>
                        <span class="time"><i class="ti-time"></i>01 minutes ago</span>
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.
                    </p>
                </div>
                <div class="timeline-task">
                    <div class="icon bg1">
                        <i class="fa fa-envelope"></i>
                    </div>
                    <div class="tm-title">
                        <h4>Ratul Hamba sent you an email</h4>
                        <span class="time"><i class="ti-time"></i>09:35</span>
                    </div>
                    <p>Hello sir , where are you, i am egerly waiting for you.
                    </p>
                </div>
                <div class="timeline-task">
                    <div class="icon bg2">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                    <div class="tm-title">
                        <h4>Rashed sent you an email</h4>
                        <span class="time"><i class="ti-time"></i>09:35</span>
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.
                    </p>
                </div>
                <div class="timeline-task">
                    <div class="icon bg2">
                        <i class="fa fa-exclamation-triangle"></i>
                    </div>
                    <div class="tm-title">
                        <h4>Rashed sent you an email</h4>
                        <span class="time"><i class="ti-time"></i>09:35</span>
                    </div>
                </div>
                <div class="timeline-task">
                    <div class="icon bg3">
                        <i class="fa fa-bomb"></i>
                    </div>
                    <div class="tm-title">
                        <h4>Rashed sent you an email</h4>
                        <span class="time"><i class="ti-time"></i>09:35</span>
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.
                    </p>
                </div>
                <div class="timeline-task">
                    <div class="icon bg3">
                        <i class="ti-signal"></i>
                    </div>
                    <div class="tm-title">
                        <h4>Rashed sent you an email</h4>
                        <span class="time"><i class="ti-time"></i>09:35</span>
                    </div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse distinctio itaque at.
                    </p>
                </div>
            </div>
        </div>
        <div id="settings" class="tab-pane fade">
            <div class="offset-settings">
                <h4>General Settings</h4>
                <div class="settings-list">
                    <div class="s-settings">
                        <div class="s-sw-title">
                            <h5>Notifications</h5>
                            <div class="s-swtich">
                                <input type="checkbox" id="switch1"/>
                                <label for="switch1">Toggle</label>
                            </div>
                        </div>
                        <p>Keep it 'On' When you want to get all the notification.</p>
                    </div>
                    <div class="s-settings">
                        <div class="s-sw-title">
                            <h5>Show recent activity</h5>
                            <div class="s-swtich">
                                <input type="checkbox" id="switch2"/>
                                <label for="switch2">Toggle</label>
                            </div>
                        </div>
                        <p>The for attribute is necessary to bind our custom checkbox with the input.</p>
                    </div>
                    <div class="s-settings">
                        <div class="s-sw-title">
                            <h5>Show your emails</h5>
                            <div class="s-swtich">
                                <input type="checkbox" id="switch3"/>
                                <label for="switch3">Toggle</label>
                            </div>
                        </div>
                        <p>Show email so that easily find you.</p>
                    </div>
                    <div class="s-settings">
                        <div class="s-sw-title">
                            <h5>Show Task statistics</h5>
                            <div class="s-swtich">
                                <input type="checkbox" id="switch4"/>
                                <label for="switch4">Toggle</label>
                            </div>
                        </div>
                        <p>The for attribute is necessary to bind our custom checkbox with the input.</p>
                    </div>
                    <div class="s-settings">
                        <div class="s-sw-title">
                            <h5>Notifications</h5>
                            <div class="s-swtich">
                                <input type="checkbox" id="switch5"/>
                                <label for="switch5">Toggle</label>
                            </div>
                        </div>
                        <p>Use checkboxes when looking for yes or no answers.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- offset area end -->
<!-- jquery latest version -->
<script src="../assets/js/vendor/jquery-2.2.4.min.js"></script>
<script>
    $(function () {
        $("#btn_next").removeClass("disabled")
        $("#btn_pre").removeClass("disabled")

        page = 0
        num = 10
        like = ""
        showData(page, num, like)

        document.getElementById("select_num").onchange = function (ev) {
            page = 0
            num = $("#select_num option:selected").val()
            showData(page, num, like)
        }


        document.getElementById("btn_next").onclick = function () {
            if (isLast) {
                alert("当前是最后一页！")
                return
            }
            page += 1
            showData(page, num, like)
            if (page > 0) {
                $("#btn_pre").removeClass("disabled")
            } else {
                $("#btn_pre").addClass("disabled");
            }
        }

        document.getElementById("btn_pre").onclick = function () {
            if (page == 0) {
                return
            }
            page -= 1
            showData(page, num, like)
        }


    })
    isEditing = false

    function startAdd() {
        if (isEditing) {
            alert("请先保存正在编辑的条目！")
            return
        }
        isEditing = true

        str = "<tr>" +
            "<td></td>" +
            "<td><input class='form-control' type='text' id='cname' name='cname' value=''></td>" +
            "<td><input class='form-control' type='text' id='ename' name='ename' value=''></td>" +
            "<td><input class='form-control' type='text' id='tp' name='tp' value=''></td>" +
            "<td>" +
            "<button type='button' class='btn btn-flat btn-outline-warning mb-3' onclick='addItem()'>添加</button>" +
            "<button type='button' class='btn btn-flat btn-outline-secondary mb-3' onclick='showData(page, num, )'>取消</button>" +
            "</td>"
        "</tr>"
        tmp = document.getElementById("tb_01").innerHTML
        console.log(tmp)
        $("#tb_01").empty()
        $("#tb_01").append(str)
        $("#tb_01").append(tmp)
    }

    function addItem() {

        comp = {
            "chineseName":$("#cname").val(),
            "englishName":$("#ename").val(),
            "types":$("#tp").val(),
        }
        if (comp.chineseName == "" || comp.englishName == "" || comp.types == ""){
            alert("编辑框内容不能为空！")
            return
        }

        $.ajax({
            url: "http://localhost:8080/compounds/add",
            dataType: "text",
            data: JSON.stringify(comp),
            type: "post",
            contentType: "application/json",
            async: false,
            statusCode: {
                200: function (data) {
                    console.log(data)
                    currentObject = null
                    isEditing = false
                }
            }
        })
        showData(page, num, like)


    }

    function showData(page, num, like) {
        if (typeof like == "undefined" || like == null){
            like = ""
        }
        //tb_01
        $.ajax({
            url: "http://localhost:8080/compounds/getItems",
            dataType: "text json",
            data: "page=" + page + "&num=" + num + "&like=" + like,
            type: "get",
            async: false,
            statusCode: {
                200: function (data) {
                    isEditing = false
                    $("#tb_01").empty()
                    $(data).each(function (i, v) {
                        str = "<tr>" +
                            "<td>" + (page * num + i + 1) + "</td>" +
                            "<td>" + v.chineseName + "</td>" +
                            "<td>" + v.englishName + "</td>" +
                            "<td>" + v.types + "</td>" +
                            "<td>" +
                            "<button type='button' class='btn btn-flat btn-outline-success mb-3' onclick='edit(" + JSON.stringify(v) + ", this.parentNode.parentNode)'>编辑</button>" +
                            "<button type='button' class='btn btn-flat btn-outline-danger mb-3' onclick='del(" + JSON.stringify(v) + ")'>删除</button>" +
                            "</td>"
                        "</tr>"
                        //table
                        $("#tb_01").append(str)
                    })
                    if (page > 0) {
                        $("#btn_pre").removeClass("disabled")
                    } else {
                        $("#btn_pre").addClass("disabled");
                    }
                    console.log($(data).length)
                    if ($(data).length < num) {
                        isLast = true
                    } else {
                        isLast = false
                    }

                    $("#tb_page").text(page + 1)
                }
            }
        })
    }

    var currentObject = null

    function edit(comp, tr) {
        if (isEditing) {
            alert("请先保存正在编辑的条目！")
            return
        }
        isEditing = true
        currentObject = comp

        tds = tr.childNodes

        tds[1].innerHTML = "<input class='form-control' type='text' id='ch_name' name='ch_name' value='" + tds[1].innerText + "'>"
        tds[2].innerHTML = "<input class='form-control' type='text' id='en_name' name='en_name' value='" + tds[2].innerText + "'>"
        tds[3].innerHTML = "<input class='form-control' type='text' id='types' name='types' value='" + tds[3].innerText + "'>"
        tds[4].innerHTML = "<button type='button' class='btn btn-flat btn-outline-warning mb-3' onclick='save()'>保存</button>" +
            "<button type='button' class='btn btn-flat btn-outline-secondary mb-3' onclick='showData(page, num, like)'>取消</button>"



    }

    function save() {
        if (currentObject == null) {
            showData(page, num, like)
            return
        }
        oldJson = currentObject

        ch_name = $("#ch_name").val()
        en_name = $("#en_name").val()
        types = $("#types").val()

        newJson = {
            "chineseName": ch_name,
            "englishName": en_name,
            "types": types
        }

        if (newJson.chineseName == "" || newJson.englishName == "" || newJson.types == ""){
            alert("编辑框内容不能为空！")
            return
        }

        json = [
                oldJson, newJson
        ]


        console.log(json)

        $.ajax({
            url: "http://localhost:8080/compounds/save",
            dataType: "text",
            data: JSON.stringify(json),
            type: "put",
            contentType: "application/json",
            async: false,
            statusCode: {
                200: function (data) {
                    console.log(data)
                    currentObject = null
                    isEditing = false
                }
            }
        })

        currentObject = null
        isEditing = false
        showData(page, num, like)
    }


    function del(comp) {
        $.ajax({
            url: "http://localhost:8080/compounds/del",
            dataType: "text json",
            data: JSON.stringify(comp),
            type: "delete",
            contentType: "application/json",
            async: false,
            statusCode: {
                200: function (data) {
                    console.log(data)
                    showData(page, num, like)
                }
            }
        })
    }
</script>
<!-- bootstrap 4 js -->
<script src="../assets/js/popper.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../assets/js/owl.carousel.min.js"></script>
<script src="../assets/js/metisMenu.min.js"></script>
<script src="../assets/js/jquery.slimscroll.min.js"></script>
<script src="../assets/js/jquery.slicknav.min.js"></script>

<!-- Start datatable js -->
<!--<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>-->
<script src="./js/table.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<!-- others plugins -->
<script src="../assets/js/plugins.js"></script>
<script src="../assets/js/scripts.js"></script>
</body>

</html>
